let stateAll = false //是否全选状态，true选中,false未选中
const tableEle = document.querySelector('table')
const totalPriceEle = document.querySelector('.total-price')
const returnUp=document.querySelector('#return')

function showProductList() {
    let cartListStr = localStorage.getItem('NEWCARTLIST')
    let cartArray = JSON.parse(cartListStr) || [] //购物车数组,来自localstorage

    let str = ` <tr>
                    <th><input type="checkbox" class="checkbox-all" ${stateAll?'checked':''} >全选</th>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>`

    let trArr = cartArray.map(function (item, index) {
        return ` <tr>
                    <td><input type="checkbox" class="checkbox-item" ${item.state?'checked':''} ></td>
                    <td>${item.id}</td>
                    <td><img width="60px" height="70px" src="${item.url}" alt=""></td>
                    <td><span>${item.name}</span></td>
                    <td>￥${item.price}</td>
                    <td><input type="button" name="minus" value="-" ${item.num<=0?'disabled':''} ><input type="text" name="amount"
                            value="${item.num}"><input type="button" name="plus" value="+"></td>
                    <td>￥${item.singlePrice}</td>
                    <td>
                        <a href="#">移入收藏</a><br>
                        <a href="#" class="delete-btn">删除</a>
                    </td>
                </tr>`
    })

    str += trArr.join('')
    tableEle.innerHTML = str   
}

showProductList()

function onProductCart() {
    tableEle.onclick = function (e) {
        let cartListStr=localStorage.getItem('NEWCARTLIST')
        let cartArray = JSON.parse(cartListStr) || []
        
        e = e || window.event //事件对象
        let target = e.target || e.srcElement //事件目标对象
        //数量加一
        if (target.value == '+') {
            //操作数据
            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            console.log(id);
            //2.根据id查找数组记录
            let product = cartArray.find(item => item.id == id)
            console.log(product);
            //3;操作数据，让数量加一
            product.num++

            //4.计算单个商品总价
            product.singlePrice =  (product.num * product.price).toFixed(2)

        }
        //数量减一
        if (target.value == '-') {
            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            // 2. 遍历productList商品数组，查找满足条件的记录并返回
            let product = cartArray.find(item => item.id == id)
            //3. 商品数组数量值减一
            product.num--
            //4.计算单个商品总价
            product.singlePrice =(product.num * product.price).toFixed(2)
            //5.重新加载改变数量之后的商品数据

        }
        //删除
        if (target.getAttribute('class') == 'delete-btn') {
            // 1.找当前操作的商品项序列号
            let id = target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
            //遍历数组，查找满足条件的数组索引号
            let index =cartArray.findIndex(item => item.id == id)
            //删除数组元素
            cartArray.splice(index, 1)
            //重新加载页面
            

        }

        //全选
        if (target.getAttribute('class') == 'checkbox-all') {
            //操作数据,
            //1. 改变全选状态数据
            if (stateAll) {
                //如果全选状态原来是选中状态，点击之后，设置为false,所有复选框状态也设置为false
                stateAll = false
                cartArray.forEach(item => item.state = false)
            } else {
                //如果全选状态原来是未选中状态，点击之后，设置为true,所有复选框状态也设置为true
                stateAll = true
                cartArray.forEach(item => item.state = true)
            }

            //简写
            // stateAll = !stateAll
            // productList.forEach(item => item.state = stateAll)

            //重新加载页面
        totalPrice(cartArray)

        }
        //所有复选框事件
        if (target.getAttribute('class') == 'checkbox-item') {
            //操作数据
            //设置复选框数据状态
            //确定当前选中的复选框,根据id
            let id = target.parentElement.nextElementSibling.innerHTML
            let product = cartArray.find(item => item.id == id)

            //改变选中复选框状态
            product.state = !product.state 
            // if(product.state){
            //     product.state = false
            // }else{
            //     product.state = true
            // }

            //根据复选框状态确定全选框状态
            stateAll = cartArray.every(item => item.state == true)
        totalPrice(cartArray)

            //重新加载页面
        }
        localStorage.setItem('NEWCARTLIST', JSON.stringify(cartArray))
        showProductList()
    }
}

/**
 * 所有商品总价
 *   思路: 遍历商品数组，将所有singlePrice累加求和
 */
function totalPrice(cartArray) {  
     
        let newCartArray = cartArray.filter(item => item.state == true)//筛选是否被复选框选中
        console.log(newCartArray);
        
        let sum = newCartArray.reduce((s, item) => s += Number(item.singlePrice), 0)
        console.log(sum);
        totalPriceEle.innerHTML =sum.toFixed(2) 
    }
    
    showProductList()
onProductCart()
    
function outputTop() {    //回到顶部
        let i = document.documentElement.scrollTop
        let timer = setInterval(function () {
            i=i-20
            if (i <= 0) {
                clearInterval(timer)                
            }
            document.documentElement.scrollTop = i
        }, 1)
}

window.onscroll = function () {    
    console.log('浏览器');
    let i = document.documentElement.scrollTop
    console.log(i);
    if (i <= 0) {
        returnUp.style.display ='none'
    } else {
        returnUp.style.display ='block'
        //$('#return').css('display','block')        
    }
}
    